ref 被用来给DOM元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素； 如果用在子组件上，引用就指向组件实例。

获得了引用信息，那么我们就可以操作元素或者组件了。

通过定义我们知道了ref的作用注册引用，并通过$refs去获取该引用的DOM元素 而且我们知道js中也有对应的api来获取元素，比如document.getElementById('id名称')，

那么这二者的区别是什么呢？

查了网上的说法是

$refs相对document.getElementById的方法，能减少获取DOM节点的消耗。 我们知道vue实现了虚拟DOM，具体底层如何实现，目前还没精力和能力去研究，后续会深入了解vue源码

也就是说在vue中要是操作DOM 元素推荐使用$refs 这种方式，可以提高性能。

还有一点需要注意，ref 是在页面渲染完成后才被创建的， 我们可以在vue 的 mounted这个钩子函数中获取实例，因为在该函数页面已经被渲染完成。

比如下面的伪代码：

完整代码示例：vue2 中 ref 和 refs 的使用示例

输出结果是：

end